<template>
  <div>
    <div>
      <template>

        <el-table
          :data="filterFile(fileList)"
          border
          max-height="300"
          :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column :type="type" width="50" label="序号" />
          <el-table-column show-overflow-tooltip prop="attachmentType" label="附件类型" />
          <el-table-column show-overflow-tooltip prop="attachmentName" label="附件名称" />
          <el-table-column prop="createBy" label="上传人" />
          <el-table-column show-overflow-tooltip prop="createTime" label="上传时间" />
          <el-table-column min-width="130" fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handlePreview(scope.row)">预览</el-button>
              <a
                style="text-decoration: none;color:#39c094;font-size: 12px;"
                :href="url+'/'+scope.row.attachmentUrl"
                :download="scope.row.attachmentName"
              >
                下载
              </a>
              <el-button v-show="isEdit&&(scope.row.attachmentType==='测绘结果'||scope.row.attachmentType==='复尺结果')" type="text" size="small" @click="handleDelete(scope.row.id,scope.$index)">删除</el-button>

            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 图片预览 -->
    <el-image-viewer
      v-if="imgDialogVisible"
      :on-close="handleCloseImg"
      :url-list="[previewImg]"
    />
  </div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { filterURL } from '@/utils'
export default {
  name: 'FileDetail',
  components: { ElImageViewer },
  props: {
    fileData: {
      type: Array,
      default: () => ([])
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'index'
    }
  },
  data() {
    return {
      // fileLength: 0,
      fileList: [],
      imgDialogVisible: false,
      previewImg: '',
      url: '/pdf-file/'
    }
  },
  watch: {
    fileData: {
      handler(v) {
        this.fileList = v
      },
      immediate: true
    }
  },
  created() {
  },

  methods: {

    // 删除附件
    handleDelete(id, index) {
      this.fileList.forEach((item, index) => {
        if (item.id === id) {
          item.dr = 1
        }
      })
      this.$emit('success', this.fileList)
    },
    filterFile(data) {
      const tempArr = data.filter(el => el.dr === 0)
      this.$emit('change', tempArr.length)
      return tempArr
    },
    handleSelectionChange(val) {
      this.$emit('select', val)
    },
    handleCloseImg() {
      this.imgDialogVisible = false
    },
    handlePreview(file) {
      const fileExtension = file.attachmentUrl.substring(file.attachmentUrl.lastIndexOf('.') + 1).toLowerCase()
      if (fileExtension === 'pdf') {
        // pdf预览
        const url = this.url + file.attachmentUrl
        const routeData = this.$router.resolve({
          path: '/viewFile',
          query: {
            src: btoa(url)
          }
        })
        window.open(routeData.href, '_blank')
      } else if (fileExtension === 'jpg' || fileExtension === 'jpeg' || fileExtension === 'png') {
      // 图片预览
        this.imgDialogVisible = true
        this.previewImg = filterURL(file.attachmentUrl)
      } else if (fileExtension === 'doc' || fileExtension === 'docx' || fileExtension === 'xlsx' || fileExtension === 'excel') {
        // word,excel预览
        window.open('http://oos.quanyou.com.cn/op/view.aspx?src=' + filterURL(file.attachmentUrl))
      } else {
        this.$message.warning('该文件类型不支持预览')
      }
    }
  }
}
</script>
